<template>
    <div class="alarmConfiguration zy-content ">
        <!-- 搜索-->
      <div class="searchBox search-box-layout">
        <Row :gutter="24">
          <Col span="4">
            <div>
              <p class="label">{{$t('spareParts.PartNo')}}</p>
              <div class="ipt">
                <Input type="text" v-model="searchParams.materielNo" clearable
                       :placeholder="`${$t('common.inputInfo')}`"
                       :maxlength="32"></Input>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('spareParts.SparePartABC')}}</p>
              <div class="ipt">
                <Select v-model="searchParams.sparePartsAbc" filterable clearable
                        :placeholder="`${$t('common.selectInfo')}`"
                        style="text-align:left">
                  <Option v-for="(item) of sparePartsAbcList"
                          :value="item.value"
                          :key="item.value"
                          :label="item.label">
                  </Option>
                </Select>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('spareParts.SparePartVED')}}</p>
              <div class="ipt">
                <Select v-model="searchParams.sparePartsVed" filterable clearable
                        :placeholder="`${$t('common.selectInfo')}`"
                        style="text-align:left">
                  <Option v-for="(item) of sparePartsVedList"
                          :value="item.value"
                          :key="item.value"
                          :label="item.label">
                  </Option>
                </Select>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('spareParts.Name')}}</p>
              <div class="ipt">
                <Input type="text" v-model="searchParams.goodsName" clearable
                       :placeholder="`${$t('common.inputInfo')}`"
                       :maxlength="32"></Input>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('spareParts.Specification')}}</p>
              <div class="ipt">
                <Input type="text" v-model="searchParams.specification" clearable
                       :placeholder="`${$t('common.inputInfo')}`"
                       :maxlength="32"></Input>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('spareParts.Brand')}}</p>
              <div class="ipt">
                <Input type="text" v-model="searchParams.brand" clearable
                       :placeholder="`${$t('common.inputInfo')}`"
                       :maxlength="32"></Input>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('spareParts.ControlMode')}}</p>
              <div class="ipt">
                <Select v-model="searchParams.manageType" filterable clearable
                        :placeholder="`${$t('common.selectInfo')}`">
                  <Option v-for="(item) of manageType"
                          :value="item.value"
                          :key="item.value"
                          :label="item.label">
                  </Option>
                </Select>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label hide-label">--</p>
              <div class="ipt">
                <Button class="search-btn" type="primary" v-if="checkBtnPermission.materialList" @click="changeNum()">{{ $t('common.Query') }}</Button>
                <Button class="reset-btn" @click="reset()"
                        v-if="checkBtnPermission.materialList"
                >{{ $t('common.reset') }}
                </Button>
              </div>
            </div>
          </Col>
        </Row>
      </div>
        <div class="list-layout mt16">
          <div class="btns clear">
            <!-- 批量删除 批量导出  批量导入 下载模板 新增-->

            <span class="title">{{ $t('common.listInformation') }}</span>
            <Button @click="createfaultCodeShowH" v-if="checkBtnPermission.materielConfigAdd">{{ $t('common.New') }}</Button>
            <Button @click="delFaultCodeShowClick" v-if="checkBtnPermission.MaterielConfigDelete">{{ $t('common.batchDelete') }}</Button>
            <Button @click="exportTemplateClick" v-if="checkBtnPermission.materialConfigExport">{{ $t('common.batchExport') }}</Button>
            <Button @click="importExcelShow" v-if="checkBtnPermission.materielConfigImport">{{ $t('common.Import') }}</Button>
            <Button @click="exportTemplate" v-if="checkBtnPermission.materialConfigTemplate">{{ $t('common.Download') }}</Button>
            <Button @click="getTableColumns(columns)">{{ handleContextMenuStatus ? $t('显示操作栏') : $t('隐藏操作栏') }}</Button>
          </div>
          <div class="tableContent">
            <Table  class="resizable-table" border @on-column-width-resize="onColumnWidthResize"
                    :columns="columnsList" ellipsis ref="selection" stripe :data="dataArr"
                   @on-selection-change="onSelectChange">
              <template slot-scope="{ row ,index}" slot="action">
                    <span class="operationBtn" @click="createfaultCodeShowH(row)"
                          v-if="checkBtnPermission.materialEdit"><i class="iconfont zy-common-bianji"></i>{{ $t('common.Edit') }}</span>
                <span class="operationBtn" @click="delPrrShowH(row)"
                      v-if="checkBtnPermission.MaterielConfigDelete"><i class="iconfont zy-common-shanchu"></i>{{ $t('common.Delete') }}</span>

              </template>
            </Table>
          </div>
          <div class="pageWrap mt16">
            <pageLeftTitle :total="total" :selected="delIds.length"/>
            <Page :total="total" :page-size="pageSize" :page-size-opts="pageSizeOption" :current="pageNum"
                  @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total/>
          </div>
        </div>

        <Modal :mask-closable="false" v-model="create" :title="addtitle" :width="1000" class="modal-content-item-layout">
            <div class="content-item">
                <Row>
                <Col :span="EquipmentListShow ? 24 : 24" class="pd16">
                    <Form ref="form" class="formList" :model="formItem" :rules="ruleValidate" label-position="top">
                        <Row :gutter="16">
                            <Col span="12">
                                <!--料号-->
                                <FormItem :label="$t('spareParts.PartNo')" prop="materielNo">
                                    <Input type="text" v-model="formItem.materielNo"
                                           :placeholder="`${$t('common.inputInfo')}`" :maxlength="32"></Input>
                                </FormItem>
                            </Col>
                            <Col span="12">
                                <!--品名-->
                                <FormItem :label="$t('spareParts.Name')" prop="goodsName">
                                    <Input type="text" v-model="formItem.goodsName"
                                           :placeholder="`${$t('common.inputInfo')}`" :maxlength="32"></Input>
                                </FormItem>
                            </Col>
                        </Row>

                        <row :gutter="16">
                            <Col span="12">
                                <!--规格-->
                                <FormItem :label="$t('spareParts.Specification')" prop="specification">
                                    <Input type="text" v-model="formItem.specification"
                                           :placeholder="`${$t('common.inputInfo')}`"
                                           :maxlength="32"></Input>
                                </FormItem>
                            </Col>
                            <Col span="12">
                                <!--品牌-->
                                <FormItem :label="$t('spareParts.Brand')" prop="brand">
                                    <Input type="text" v-model="formItem.brand"
                                           :placeholder="`${$t('common.inputInfo')}`" :maxlength="32"></Input>
                                </FormItem>
                            </Col>
                        </row>
                        <Row :gutter="16">
                            <Col span="12">
                                <!--备件ABC类-->
                                <FormItem :label="$t('spareParts.SparePartABC')" prop="sparePartsAbc">
                                    <Row :gutter="16">
                                        <Col span="21">
                                            <Select v-model="formItem.sparePartsAbc" filterable clearable
                                                    :placeholder="`${$t('common.selectInfo')}`">
                                                <Option v-for="(item) of sparePartsAbcList"
                                                        :value="item.value"
                                                        :key="item.value"
                                                        :label="item.label">
                                                </Option>
                                            </Select>
                                        </Col>
                                        <Tooltip placement="top">
                                            <Icon type="ios-help-circle-outline" size="24" style="line-height:32px"/>
                                            <template #content>
                                                <div style=" width:200px">
                                                    <Table :columns="tooltipColumns" :data="tooltipData"></Table>
                                                </div>
                                            </template>
                                        </Tooltip>
                                    </Row>
                                </FormItem>
                            </Col>
                            <Col span="12">
                                <!--备件备件VED类-->
                                <FormItem :label="$t('spareParts.SparePartVED')" prop="sparePartsVed">
                                    <Row :gutter="16">
                                        <Col span="21">
                                            <Select v-model="formItem.sparePartsVed" filterable clearable
                                                    :placeholder="`${$t('common.selectInfo')}`">
                                                <Option v-for="(item) of sparePartsVedList"
                                                        :value="item.value"
                                                        :key="item.value"
                                                        :label="item.label">
                                                </Option>
                                            </Select>
                                        </Col>
                                        <Tooltip placement="top" max-width="450">
                                            <Icon type="ios-help-circle-outline" size="24" style="line-height:32px"/>
                                            <template #content>
                                                <div style=" width:400px">
                                                    <Table :columns="tooltipColumns2" :data="tooltipData2"></Table>
                                                </div>
                                            </template>
                                        </Tooltip>
                                    </Row>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row :gutter="16">
                            <Col span="12">
                                <!--物品分类-->
                                <FormItem :label="$t('common.SpareClassification')" prop="goodsType">
                                    <Select v-model="formItem.goodsType" filterable clearable
                                            :placeholder="`${$t('common.selectInfo')}`">
                                        <Option v-for="(item) of goodsType"
                                                :value="item.value"
                                                :key="item.value"
                                                :label="item.value">
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col span="12">
                                <!--资产类型-->
                                <FormItem :label="$t('spareParts.AssetType')" prop="assetId">
                                    <Select v-model="formItem.assetId"
                                            filterable clearable
                                            :placeholder="`${$t('common.selectInfo')}`"
                                            @on-change="assetTypeChange">
                                        <Option v-for="(item) of assetType"
                                                :value="item.value"
                                                :key="item.value"
                                                :label="item.label">
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row :gutter="16">
                            <Col span="12">
                                <!--管理方式-->
                                <FormItem :label="$t('spareParts.ControlMode')" prop="manageType">
                                    <Select v-model="formItem.manageType"
                                            filterable
                                            disabled
                                            :placeholder="`${$t('common.selectInfo')}`">
                                        <Option v-for="item in manageType"
                                                :value="item.value"
                                                :key="item.value"
                                                :label="item.label">
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col span="12">
                                <!--安全系数Z-->
                                <FormItem :label="$t('安全系数Z')" prop="safetyCoefficient">
                                    <Row :gutter="16">
                                        <Col span="21">
                                            <InputNumber v-model="formItem.safetyCoefficient"
                                           :placeholder="`${$t('common.inputInfo')}`" :maxlength="32"></InputNumber>
                                        </Col>
                                        <Tooltip placement="top" max-width="450">
                                            <Icon type="ios-help-circle-outline" size="24" style="line-height:32px"/>
                                            <template #content>
                                                <div style=" width:400px">
                                                    <img src="~images/spareHelp.png" width="400">
                                                </div>
                                            </template>
                                        </Tooltip>
                                    </Row>
                                </FormItem>
                            </Col>
                            <Col span="12">
                                <!--采购提前期L-->
                                <FormItem :label="$t('采购提前期L(天)')" prop="purchaseLeadDay">
                                    <InputNumber v-model="formItem.purchaseLeadDay"
                                           :placeholder="`${$t('common.inputInfo')}`" :maxlength="32"></InputNumber>
                                </FormItem>
                            </Col>
                            <Col span="12">
                                <!--安全库存-->
                                <FormItem :label="$t('spareParts.SafetyStock')" prop="safeStock">
                                    <Input type="text" v-model="formItem.safeStock"
                                           :placeholder="`${$t('common.inputInfo')}`" :maxlength="32"></Input>
                                </FormItem>
                            </Col>
                            <Col span="12">
                                <!--标准寿命-->
                                <FormItem :label="$t('spareParts.StandardLifetime')" prop="standardLife">
                                    <Input type="text" v-model="formItem.standardLife"
                                           :placeholder="`${$t('common.inputInfo')}`" :maxlength="32"/>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row :gutter="16">

                            <Col span="12">
                                <!--上传附件-->
                                <FormItem :label="$t('spareParts.Upload')">
                                    <Upload ref="fileUpload" :show-upload-list="false"
                                            :before-upload="handleBeforeUpload"
                                            type="drag" action="">
                                        <!-- 点击上传 -->
                                        <!-- <Button type="primary">{{ $t('common.UploadAttachment') }}</Button> -->
                                        <Button icon="ios-cloud-upload-outline" style="float:left">
                                            {{ $t('ledger.uploadFiles') }}
                                        </Button>
                                    </Upload>

                                    <div class="file-list" v-for="(item, index) in setFileList" :key="index">
                                        <span class="item-src" @click="handlePreview(item)">{{ item.fileName }}</span>
                                        <Icon class="item-icon" type="ios-trash-outline" size="20"
                                              @click="delFileList(index)"
                                              v-if="item"></Icon>
                                    </div>
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                    <div class="equipmentContent" @click="handleEquipment">
                        <!-- <span>关联设备</span> -->
                        <span>{{ $t('spareParts.RelatedEquipment') }}</span>
                        <Icon type="md-add" size='16'/>
                    </div>


                </Col>

            </Row>
            </div>
            <div class="content-item" v-if="EquipmentListShow">
                <div  class="pd16">
                        <div>
                            <div class="tableContent">
                                <Form label-position="right">
                                    <Row :gutter="16">
                                        <Col span="10" align="center">
                                            <!--公司 -->
                                            <FormItem :label="$t('common.company')">
                                                <Select v-model="equipmentParams.useCompanyId" filterable clearable
                                                        :placeholder="`${$t('common.selectInfo')}`">
                                                    <Option v-for="(item) of companyList"
                                                            :value="item.id"
                                                            :key="item.code"
                                                            :label="item.fullName">
                                                    </Option>
                                                </Select>
                                            </FormItem>
                                        </Col>
                                        <Col span="10" align="center">
                                            <!-- 设备名称 -->
                                            <FormItem :label="$t('spareParts.EquipmentName')">
                                                <Input type="text" v-model="equipmentParams.deviceName"
                                                    :placeholder="`${$t('common.inputInfo')}`"
                                                    :maxlength="32"></Input>
                                            </FormItem>
                                        </Col>
                                        <Col span="4" align="center" style="height:72px;display:flex;align-items:flex-end">
                                            <Button type="primary" v-if="checkBtnPermission.materialDevicesList"
                                                    @click="equipmentChangeNum()">{{ $t('common.Query') }}
                                            </Button>
                                        </Col>
                                    </Row>
                                    <Table ellipsis ref="selectionList" stripe :columns="equipmentSearchColumns"
                                        :data="equipmentListArr" max-height="280"
                                        @on-selection-change="handleSelect"></Table>
                                    <Row :gutter="16">
                                    <Col span="24" align="center" style="padding:5px">
                                        <!-- <Button type="default" @click="closeEquipment">{{ $t('common.Cancle') }}</Button> -->
                                        <Button type="primary" :loading="addLoading" @click="addEquipment">
                                            {{ $t('common.CopyandAdd') }}
                                        </Button>
                                    </Col>
                                    </Row>
                                </Form>
                            </div>
                        </div>
                    </div>
                    <div class="pd16">
                        <div class="tableContent" v-if="EquipmentIsShow && deviceList != []">
                            <Table ellipsis ref="selection" stripe :columns="equipmentColumns" :data="deviceList"
                                   max-height="280">
                                <template slot-scope="{ row ,index}" slot="action">
                                    <span class="operationBtn"
                                          @click="handleDel(index)">{{ $t('common.Delete') }}</span>
                                </template>
                            </Table>
                        </div>
                    </div>
            </div>
            <div slot="footer">
                <Button type="default" @click="submitCanle">{{ $t('common.Cancle') }}</Button>
                <Button type="primary" :loading="loading" @click="addOk('form')">{{ $t('maintenance.Confirmed') }}
                </Button>
            </div>
        </Modal>

        <Modal :mask-closable="false" v-model="delFaultCodeShowF"  :title="$t('common.Delete')"
               class="modal-title-layout">
          <div class="icon red">
            <i class="iconfont zy-common-shanchu"></i>
          </div>
          <p class="title">
            <span>{{$t('common.confirmDelete')}}</span>
          </p>
            <div slot="footer">
                <Button type="default" @click="delFaultCodeShowF = false,manageType = []">{{ $t('common.Cancle') }}
                </Button>
                <Button type="primary" :loading="loading" @click="deleteOk">{{ $t('maintenance.Confirmed') }}</Button>
            </div>
        </Modal>
        <importExcelModal :importExcelStateF="importExcelState" v-if="importExcelState"
                          @importExcelChange="importExcelChange"></importExcelModal>
    </div>
</template>

<script>
import {
    searchApi,
    addApi,
    editApi,
    deleteApi,
    templateApi,
    exportApi,
    equipmentSearchApi
} from "@/api/spareParts/material.js";
import {getUserSelect, getCompany, getBackup, getShelf, getLocation} from "@/api/index.js";
import importExcelModal from '@/components/importExcel.vue';
import fileDownload from 'js-file-download';
import toggleTableOperation from "@/mixins/toggleTableOperation";

export default {
    name: "material",//仓库配置
    components: {importExcelModal},
    mixins:[toggleTableOperation],
    data() {
        return {
            originMaterielNo: '',
            importExcelState: false, /*批量导入*/
            formItem: {
                materielNo: "",
                goodsName: "",
                specification: "",
                brand: "",
                sparePartsAbc: "",
                sparePartsVed: "",
                goodsType: null,
                assetType: null,
                manageType: null,
                safeStock: "",
                standardLife: "",
                safetyCoefficient:null,
                purchaseLeadDay:null,
                assetId: null
            },
            assetTypeobj: {},
            addtitle: "",
            allCheck: false,
            allCheckE: false,
            loading: false,
            addLoading: false,
            create: false,
            searchParams: {},
            pageNum: 1,
            pageSize: 10,
            total: 0,
            setFileList: [],
            dataArr: [],
            equipmentListArr: [],
            delFaultCodeShowF: false,//是否显示删除弹窗
            pageSizeOption: [10, 20, 30, 40],
            delIds: [],
            devices: [],
            deviceList: [],
            selection: [],
            checkBtnPermission: {},
            companyList: [],
            equipmentParams: [],
            EquipmentIsShow: false,
            EquipmentListShow: false,
            widthNum: "600",
            sparePartsAbcList: [{
                value: 'A',
                label: 'A类'
            }, {
                value: 'B',
                label: 'B类'
            }, {
                value: 'C',
                label: 'C类'
            },
            ],
            sparePartsVedList: [{
                value: 'V',
                label: 'V类'
            }, {
                value: 'E',
                label: 'E类'
            }, {
                value: 'D',
                label: 'D类'
            },
            ],
            goodsType: [],
            assetType: [
                {
                    value: 0,
                    label: '非资产类'
                },
            ],
            manageType: [
                {
                    value: 1,
                    label: '单个管理'
                },
                {
                    value: 2,
                    label: '批量管理'
                },
            ],
            columns: [
                {
                    key: 'selection',
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    // title: `${this.$t('spareParts.PartNo')}`,
                    title: `${this.$t('spareParts.PartNo')}`,
                    key: 'materielNo',
                    minWidth: 160,
                    align: 'center',
                    resizable: true
                },
                {
                    // title: `${this.$t('common.GoodsName')}`,
                    title: `${this.$t('spareParts.Name')}`,
                    key: 'goodsName',
                    minWidth: 160,
                    align: 'center',
                    resizable: true
                },
                {
                    // title: `${this.$t('spareParts.Specification')}`,
                    title: `${this.$t('spareParts.Specification')}`,
                    key: 'specification',
                    minWidth: 120,
                    align: 'center',
                    resizable: true
                },
                {
                    // title: '创建人',
                    title: `${this.$t('common.CreateBy')}`,
                    key: 'createByName',
                    minWidth: 100,
                    align: 'center',
                    resizable: true
                },
                {
                    // title: '品牌',
                    title: `${this.$t('spareParts.Brand')}`,
                    key: 'brand',
                    minWidth: 160,
                    align: 'center',
                    resizable: true
                },
                {
                    // title: '备件ABC类',
                    title: `${this.$t('spareParts.SparePartABC')}`,
                    key: 'sparePartsAbc',
                    minWidth: 150,
                    align: 'center',
                    resizable: true
                },
                {
                    // title: '备件VED类',
                    title: `${this.$t('spareParts.SparePartVED')}`,
                    key: 'sparePartsVed',
                    minWidth: 150,
                    align: 'center',
                    resizable: true
                },
                {
                    // title: '物品分类',
                    title: `${this.$t('spareParts.Classification')}`,
                    key: 'goodsType',
                    minWidth: 130,
                    align: 'center',
                    resizable: true
                    // render: (h, params) => {
                    //     return h('div', params.row.goodsType === 1 ? '机械类' : params.row.goodsType === 2 ? '气动类' : params.row.goodsType === 3 ? '电气类' : '')
                    // }
                },
                {
                    // title: '资产类型',
                    title: `${this.$t('spareParts.AssetType')}`,
                    key: 'assetType',
                    minWidth: 120,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', params.row.assetType === 1 ? '资产类' : params.row.assetType === 2 ? '非资产类' : '')
                    },
                    resizable: true
                },
                {
                    // title: `${this.$t('common.ControlMode')}`,
                    title: `${this.$t('spareParts.ControlMode')}`,
                    key: 'manageTypeName',
                    minWidth: 140,
                    align: 'center',
                    resizable: true
                },
                {
                    // title: '安全系数Z',
                    title: `${this.$t('安全系数Z')}`,
                    key: 'safetyCoefficient',
                    minWidth: 140,
                    align: 'center'
                },
                {
                    // title: '采购提前期L(天)',
                    title: `${this.$t('采购提前期L(天)')}`,
                    key: 'purchaseLeadDay',
                    minWidth: 140,
                    align: 'center',
                    resizable: true
                },
                {
                    // title: '安全库存',
                    title: `${this.$t('spareParts.SafetyStock')}`,
                    key: 'safeStock',
                    minWidth: 140,
                    align: 'center'
                },
                {
                    // title: '标准寿命',
                    title: `${this.$t('spareParts.StandardLifetime')}`,
                    key: 'standardLife',
                    minWidth: 160,
                    align: 'center',
                    resizable: true
                },
                {
                    // title: '创建时间',
                    title: `${this.$t('common.CreateTime')}`,
                    key: 'createTime',
                    minWidth: 180,
                    align: 'center',
                    resizable: true
                },
                {
                    title: `${this.$t('common.operation')}`,
                    slot: "action",
                    fixed: 'right',
                    minWidth: 200,
                    align: "center"
                }
            ],
            equipmentColumns: [
                {
                    // title: `${ this.$t('equipCheck.EquipmentName') }`,
                    title: `${this.$t('spareParts.EquipmentName')}`,
                    key: 'deviceName',
                    minWidth: 100,
                    align: 'center'
                },
                {
                    // title: `${this.$t('spareParts.Model')}`,
                    title: `${this.$t('spareParts.Model')}`,
                    key: 'specification',
                    minWidth: 100,
                    align: 'center'
                },
                {
                    title: `${this.$t('common.operation')}`,
                    slot: "action",
                    minWidth: 150,
                    align: "center"
                }
            ],
            equipmentSearchColumns: [
                {
                    key: 'selection',
                    type: 'selection',
                    width: 60,
                    // fixed: 'left',
                    align: 'center'
                },
                {
                    //title: '设备名称',
                    title: `${this.$t('spareParts.EquipmentName')}`,
                    key: 'deviceName',
                    minWidth: 100,
                    align: 'center'
                },
                {
                    // title: `${this.$t('spareParts.Model')}`,
                    title: `${this.$t('spareParts.Model')}`,
                    key: 'specification',
                    minWidth: 100,
                    align: 'center'
                },
            ],
            tooltipColumns: [
                {
                    //title: '分类',
                    title: `${this.$t('spareParts.Classification')}`,
                    key: 'name'
                },
                {
                    // title: '分类标准',
                    title: `${this.$t('spareParts.ClassificationStandard')}`,
                    key: 'info'
                },
            ],
            tooltipData: [
                {
                    name: 'A',
                    info: '资金累计占比80%且品种占5%'
                },
                {
                    name: 'B',
                    info: '次要设备'
                },
                {
                    name: 'c',
                    info: '资金累计占比5%且品种占80%'
                },
            ],
            tooltipColumns2: [
                {
                    // title: '分类',
                    title: `${this.$t('spareParts.Classification')}`,
                    key: 'name'
                },
                {
                    // title: '分类标准',
                    title: `${this.$t('spareParts.ClassificationStandard')}`,
                    key: 'info'
                },
            ],
            tooltipData2: [
                {
                    name: 'V',
                    info: '在生产过程中， 那些严重影响生产的，缺货成本很高的，在任何时刻必须可用的备件被归为极其重要的一类'
                },
                {
                    name: 'E',
                    info: '需求稍微低一点的，库存可以提供的被归为必要的一类'
                },
                {
                    name: 'D',
                    info: '其余的具有最少需求的、缺货了也不会严重影响生产进度的备件被归为一般可取的一类'
                },
            ],
            ruleValidate: {
                materielNo: [
                    {required: true, message: '请填写料号', trigger: 'blur', type: 'string'}
                ],
                goodsName: [
                    {required: true, message: '请填写品名', trigger: 'blur', type: 'string'}
                ],
                specification: [
                    {required: true, message: '请填写规格', trigger: 'blur', type: 'string'}
                ],
                brand: [
                    {required: true, message: '请填写品牌', trigger: 'blur', type: 'string'}
                ],
                sparePartsAbc: [
                    {required: true, message: '请选择备件ABC类', trigger: 'chanblurge', type: 'string'}
                ],
                sparePartsVed: [
                    {required: true, message: '请选择备件VED类', trigger: 'blur', type: 'string'}
                ],
                goodsType: [
                    {required: true, message: '请选择物品分类', trigger: 'blur', type: 'string'}
                ],
                assetId: [
                    {required: true, message: '请选择资产类型', trigger: 'blur', type: 'number'}
                ],
                manageType: [
                    {required: true, message: '请选择管理方式', trigger: 'blur', type: 'number'}
                ],
                safeStock: [
                    {required: true, message: '请填写安全库存', trigger: 'blur', type: 'string'}
                ],
                standardLife: [
                    {required: true, message: '请填写标准寿命', trigger: 'blur', type: 'string'}
                ],
                safetyCoefficient: [
                    {required: true, message: '请填写安全系数Z', trigger: 'blur', type: 'number'}
                ],
                purchaseLeadDay: [
                    {required: true, message: '请填写采购提前期L', trigger: 'blur', type: 'number'}
                ]
            }
        }
    },
    watch: {
        EquipmentListShow(newVal, oldVal) {
            this.widthNum = newVal ? "1000" : "600"
        }
    },
    mounted() {


        this.getTableColumnsWidth(this.columns)

        this.searchList();
        let itemList = JSON.parse(window.localStorage.getItem('USER_URI'))
        for (let item of itemList) {
            if (item.code == "materialList") {
                this.checkBtnPermission.materialList = true
            }
            if (item.code == "materialDevicesList") {
                this.checkBtnPermission.materialDevicesList = true
            }
            if (item.code == "materielConfigAdd") {
                this.checkBtnPermission.materielConfigAdd = true
            }
            if (item.code == "MaterielConfigDelete") {
                this.checkBtnPermission.MaterielConfigDelete = true
            }
            if (item.code == "materialEdit") {
                this.checkBtnPermission.materialEdit = true
            }
            if (item.code == "materialConfigExport") {
                this.checkBtnPermission.materialConfigExport = true
            }
            if (item.code == "materielConfigImport") {
                this.checkBtnPermission.materielConfigImport = true
            }
            if (item.code == "materialConfigTemplate") {
                this.checkBtnPermission.materialConfigTemplate = true
            }
        }
        this.getAsstetype()
        this.getList()
    },

    methods: {
      getList(){
        this.axios({
          method: 'post',
          url: '/dms/dict/list ',
          data:{
            pageNo: 1,
            pageSize: 100
          }
        }).then(res => {
          if(res.code === 200){
            if (res.data.list && res.data.list.length){
              this.goodsType = res.data.list.filter(val=>val.name === '备件分类')
            }
          }else{
            this.$Message.warning(({content:res.msg,duration:6,closable:true}));
          }
        })
      },
        //查询资产分类
        getAsstetype() {
            let params = {
                // pageNum:1,
                // pageSize:100,
                belong: 2
            };
            this.axios({
                method: 'get',
                url: '/dms/assetCategory/getListByName',
                params

            }).then(res => {
                if (res.code === 200) {
                    const arr = res.data.map(val => ({
                        label: val.details,
                        value: val.id
                    }))
                    this.assetType = this.assetType.concat(arr)
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        },
        assetTypeChange(val) {
            this.assetTypeobj = this.assetType.find(item => item.value === val)

            if (val === 0) {
                this.formItem.manageType = 2
            } else {
                this.formItem.manageType = 1
            }
            this.$forceUpdate()
        },
        //获取公司
        getCompanyList() {
            getCompany().then(res => {
                if (res.code === 200) {
                    this.companyList = res.data
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            }).finally(() => {
                this.loading = false
            })
        },
      reset(){
        this.searchParams = {};
        this.changeNum();
      },
        //分页
        changeNum() {
            this.pageNum = 1;
            this.searchList();
        },
        changePageSize(pageSize) {
            this.pageSize = pageSize;
            this.searchList();
        },
        changePageNum(val) {
            this.pageNum = val;
            this.searchList();
        },
        //查询列表
        searchList() {
            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
            };
            for (let key in this.searchParams) {
                if (this.searchParams[key]) {
                    this.$set(params, key, this.searchParams[key])
                }
            }
            searchApi(params).then(res => {
                if (res.code === 200) {
                    this.dataArr = res.data.list
                    this.total = res.data.total
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        },
        //查询列表
        equipmentSearchList() {

        },
        equipmentChangeNum() {
            let params = {};
            for (let key in this.equipmentParams) {
                if (this.equipmentParams[key]) {
                    this.$set(params, key, this.equipmentParams[key])
                }
            }
            equipmentSearchApi(params).then(res => {
                if (res.code === 200) {
                    this.equipmentListArr = res.data
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        },
        //增加或编辑
        createfaultCodeShowH(row) {
            this.getCompanyList()
            this.$refs.form.resetFields();
            this.setFileList = []
            if (row.id) {
                this.EquipmentListShow = (row.dmsDeviceConfigResponseVOs.length > 0)
                this.EquipmentIsShow = (row.dmsDeviceConfigResponseVOs.length > 0)
                this.addtitle = `${this.$t('common.Edit')}`
                this.formItem.id = row.id
                this.formItem.materielNo = row.materielNo
                this.originMaterielNo = row.materielNo
                this.formItem.goodsName = row.goodsName
                this.formItem.specification = row.specification
                this.formItem.brand = row.brand
                this.formItem.sparePartsAbc = row.sparePartsAbc
                this.formItem.sparePartsVed = row.sparePartsVed
                this.formItem.goodsType = row.goodsType
                // 处理一下 当assetId = 0时，资产类型为非资产类型 （2）
                this.formItem.assetType = row.assetType
                this.formItem.assetId = row.assetId
                this.formItem.manageType = row.manageType
                this.formItem.safeStock = row.safeStock
                this.formItem.deviceId = row.deviceId
                this.formItem.remark = row.remark
                this.formItem.standardLife = row.standardLife
                this.formItem.safetyCoefficient = Number(row.safetyCoefficient)
                this.formItem.purchaseLeadDay = row.purchaseLeadDay
                this.setFileList = row.files
                this.devices = []
                this.deviceList = row.dmsDeviceConfigResponseVOs
                //this.deviceList=this.getCompanyList.filters(item=>{row.deviceId===item.id})

            } else {
                this.addtitle = `${this.$t('common.New')}`
                this.EquipmentListShow = false
                this.EquipmentIsShow = false
                this.formItem = {
                    materielNo: "",
                    goodsName: "",
                    specification: "",
                    brand: "",
                    sparePartsAbc: "",
                    sparePartsVed: "",
                    goodsType: null,
                    assetType: null,
                    manageType: null,
                    safeStock: "",
                    standardLife: "",
                    safetyCoefficient:null,
                    purchaseLeadDay:null,
                    assetId: null
                }
                this.devices = []
                this.deviceList = []
            }
            this.$forceUpdate()

            // 打开model
            this.create = true;
        },
        addOk(name) {
            this.$refs[name].validate((valid) => {
                if (!valid) {
                    console.error('校验失败');
                    return
                }

                this.loading = true;
                this.formItem.files = this.setFileList;

                let deviceIds = this.deviceList.map(item => item.id);
                this.formItem.deviceId = deviceIds.toString();

                if (this.formItem.assetId === 0) {
                    this.formItem.assetType = 2
                } else {
                    this.formItem.assetType = 1
                }

                const dataObj = JSON.parse(JSON.stringify(this.formItem))
                if (this.formItem.id) {
                    editApi(dataObj).then(res => {
                        this.loading = false;
                        if (res.code === 200) {
                            this.changeNum();
                            this.$Message.success("编辑成功");
                            this.create = false;
                        } else {
                            this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                            this.changeNum();
                            this.create = false;
                        }
                    })
                } else {
                    addApi(dataObj).then(res => {
                        this.loading = false;
                        if (res.code === 200) {
                            this.changeNum();
                            this.$Message.success("新增成功");
                            this.create = false;
                        } else {
                            this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                            this.changeNum();
                        }
                    })
                }
            })

        },
        submitCanle() {
            this.create = false
            this.changeNum();
        },
        addEquipment() {
            this.devices.forEach(item => {
                if (!this.deviceList.find(e => e.id == item.id)) {
                    this.deviceList.push(item)
                }
            })
            this.$refs.selectionList.selectAll(false)
        },
        closeEquipment() {
            this.EquipmentListShow = false
            this.$refs.selectionList.selectAll(false)
        },
        handleEquipment() {
            this.EquipmentIsShow = !this.EquipmentIsShow
            this.EquipmentListShow = this.EquipmentIsShow
        },
        handleDel(index) {
            this.deviceList.splice(index, 1)
        },
        //勾选列表
        onSelectChange(selection) {
            let myArray = [];
            selection.map((item, index) => {
                myArray.push(item.id)
            })
            this.delIds = myArray;
            if (selection.length > 0) {
                this.allCheck = true
            } else {
                this.allCheck = false
            }
        },

        handleSelect(selection) {
            this.devices = selection
            if (selection.length > 0) {
                this.allCheckE = true
            } else {
                this.allCheckE = false
            }

        },
        //批量删除
        delFaultCodeShowClick() {
            if (this.delIds.length == 0) {
                this.$Message.warning({
                    content:`${ this.$t('common.deleteItems') }`,
                    duration: 6,
                    closable: true,
                });
                return;
            } else {
                this.delFaultCodeShowF = true;
            }
        },
        //删除
        delPrrShowH(row) {
            //点击展示提示删除弹窗
            this.delFaultCodeShowF = true;
            this.delIds = [];
            this.delIds.push(row.id);
        },
        deleteOk() {
            this.loading = true;
            let params = {delIds: this.delIds}
            deleteApi(params).then(res => {
                this.loading = false;
                if (res.code === 200) {
                    this.changeNum();
                    this.$Message.success("删除成功");
                    this.allCheck = false;
                    this.delFaultCodeShowF = false;
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        },
        //下载模板
        exportTemplate() {
            const filName = '物料配置模板'
            templateApi().then(res => {
                fileDownload(res, filName + '.xlsx')
            })
        },
        //导入
        importExcelShow() {
            this.importExcelState = true;
        },
        importExcelChange(val) {
            this.importExcelState = false;
            if (val === 'success') {
                this.changeNum();
            }
        },
        //导出
        exportTemplateClick() {
            let params = {
                delIds: this.delIds,
            };
            for (let key in this.searchParams) {
                if (this.searchParams[key]) {
                    this.$set(params, key, this.searchParams[key])
                }
            }
            const filName = '物料配置'
            exportApi(params).then(res => {
                fileDownload(res, filName + '.xlsx')
            })
        },
        //上传附件

        handleBeforeUpload(file) {
            let formData = new FormData();
            formData.append("dir", 'device')
            formData.append("file", file)
            let config = {
                headers: {
                    "Content-Type": "multipart/form-data"
                }
            };
            this.axios({
                method: 'post',
                url: '/fileServer/upload',
                data: formData,
                config,
            }).then(res => {
                if (res.code == 200) {
                    this.setFileList.push({
                        fileName: res.data.fileName,
                        filePath: res.data.filepath,
                        fileUrl: res.data.fileUrl
                    })
                }
            })
            return false;
        },
        //文件删除
        delFileList(id) {
            this.setFileList = this.setFileList.filter((item, index) => index != id)
        },

        //文件预览
        handlePreview(item) {
            if (item) {
                window.open(this.util.filePathToUrl(item.filePath))
            }
        },
    }
}
</script>

<style scoped lang="scss">
/deep/ .ivu-upload-drag {
    border: none !important;
}

.ivu-input-number {
    width: -webkit-fill-available;
}

.equipmentContent {
    font-weight: bold;
    margin: 0 4px 20px 0;
    font-size: 14px;
    color: #515a6e;
}

.item-src {
    cursor: pointer;
}
</style>

<style scope lang="scss">
/deep/ .ivu-upload-drag:hover {
    border: none !important;
}

/deep/ .ivu-upload-drag {
    border: none !important;
}
</style>

